<template>
	<div class="waybill-timeline">
		<!-- 运单号切换 -->
		<div class="waybill-tabs">
			<div
				v-for="(waybill, index) in waybillList"
				:key="index"
				class="tab-item"
				:class="{ active: waybill.waybillNo === activeWaybillNo }"
				@click="handleSelectWaybill(waybill.waybillNo)"
			>
				{{ waybill.waybillNo }}
			</div>
		</div>

		<!-- 运单流程 -->
		<div class="waybill-process" v-if="currentWaybill">
			<div
				class="timeline-item"
				v-for="(step, index) in currentWaybill.process"
				:key="index"
			>
				<div class="timeline-node">
					<div class="node-circle" :class="{ completed: step.completed }">
						<el-icon v-if="step.completed">
							<Check />
						</el-icon>
						<span v-else>{{ index + 1 }}</span>
					</div>
					<div
						class="node-line"
						v-if="index !== currentWaybill.process.length - 1"
					></div>
				</div>
				<div class="timeline-content" :class="{ completed: step.completed }">
					<div class="step-header">
						<div class="step-name">{{ step.name }}</div>
						<el-tag size="small" :type="step.completed ? 'success' : 'info'">
							{{ step.completed ? '已完成' : '进行中' }}
						</el-tag>
					</div>
					<div class="step-body">
						<div class="info-item">
							<span class="label">操作人：</span>
							<span class="value">{{ step.operator }}</span>
						</div>
						<div class="info-item">
							<span class="label">操作时间：</span>
							<span class="value time">{{ step.operateTime }}</span>
						</div>
						<div class="info-item" v-if="step.weight || step.netWeight">
							<span class="label">重量：</span>
							<span class="value">{{ step.weight }}吨</span>
							<span class="label ml-4">净重：</span>
							<span class="value">{{ step.netWeight }}吨</span>
						</div>
						<div class="info-item" v-if="step.remark">
							<span class="label">备注：</span>
							<span class="value">{{ step.remark }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Check } from '@element-plus/icons-vue';

const props = defineProps({
	waybillList: {
		type: Array,
		default: () => [],
	},
});

const emit = defineEmits(['select']);

// 当前选中的运单号
const activeWaybillNo = ref('');

// 选择运单
const handleSelectWaybill = (waybillNo) => {
	activeWaybillNo.value = waybillNo;
	emit('select', waybillNo);
};

// 获取当前运单的完整信息
const currentWaybill = computed(() => {
	const waybill = props.waybillList.find(
		(w) => w.waybillNo === activeWaybillNo.value,
	);
	if (!waybill) return null;

	// 这里模拟运单流程数据，实际应该从后端获取
	return {
		...waybill,
		process: [
			{
				name: '已发货',
				completed: true,
				operator: waybill.operator,
				operateTime: waybill.operateTime,
				weight: waybill.weight,
				netWeight: waybill.netWeight,
				remark: '货物已从发货地发出',
			},
			{
				name: '运输中',
				completed: true,
				operator: '张三',
				operateTime: '2025-5-1 12:22:20',
				remark: '货物正在运输途中',
			},
			{
				name: '已到达',
				completed: waybill.status === '已完成',
				operator: '李四',
				operateTime: '2025-5-1 18:22:20',
				remark: '货物已到达目的地',
			},
			{
				name: '已签收',
				completed: waybill.status === '已完成',
				operator: '王五',
				operateTime: '2025-5-1 19:22:20',
				remark: '收货方已确认签收',
			},
		],
	};
});

// 初始化选中第一个运单
if (props.waybillList.length > 0) {
	activeWaybillNo.value = props.waybillList[0].waybillNo;
}
</script>

<style lang="scss" scoped>
.waybill-timeline {
	background-color: var(--el-fill-color-blank);
	border: 1px solid var(--el-border-color-lighter);
	border-radius: 4px;

	// 运单号切换样式
	.waybill-tabs {
		display: flex;
		gap: 8px;
		padding: 16px 16px 0;
		border-bottom: 1px solid var(--el-border-color-lighter);
		background-color: var(--el-fill-color-blank);

		.tab-item {
			padding: 8px 16px;
			border: 1px solid var(--el-border-color);
			border-bottom: none;
			border-radius: 4px 4px 0 0;
			cursor: pointer;
			font-size: 14px;
			color: var(--el-text-color-regular);
			background-color: var(--el-fill-color-blank);
			position: relative;
			bottom: -1px;
			transition: all 0.3s;

			&:hover {
				color: var(--el-color-primary);
			}

			&.active {
				color: var(--el-color-primary);
				border-color: var(--el-border-color-lighter);
				border-bottom: 1px solid var(--el-fill-color-blank);
			}
		}
	}

	// 运单流程样式
	.waybill-process {
		padding: 16px;

		.timeline-item {
			display: flex;
			position: relative;
			padding: 16px 0;

			&:first-child {
				padding-top: 0;
			}

			&:last-child {
				padding-bottom: 0;
			}

			.timeline-node {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 24px;

				.node-circle {
					width: 32px;
					height: 32px;
					border-radius: 50%;
					border: 2px solid var(--el-border-color);
					background-color: white;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					color: var(--el-text-color-regular);
					z-index: 1;

					&.completed {
						background-color: var(--el-color-success);
						border-color: var(--el-color-success);
						color: white;
					}
				}

				.node-line {
					position: absolute;
					top: 32px;
					width: 2px;
					height: calc(100% - 16px);
					background-color: var(--el-border-color);
				}
			}

			.timeline-content {
				flex: 1;
				padding: 16px;
				border-radius: 4px;
				background-color: var(--el-fill-color-blank);
				border: 1px solid var(--el-border-color-lighter);

				&.completed {
					background-color: var(--el-color-success-light-9);
					border-color: var(--el-color-success-light-5);
				}

				.step-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 12px;

					.step-name {
						font-size: 15px;
						font-weight: 500;
						color: var(--el-text-color-primary);
					}
				}

				.step-body {
					.info-item {
						display: flex;
						align-items: center;
						margin-bottom: 8px;

						&:last-child {
							margin-bottom: 0;
						}

						.label {
							color: var(--el-text-color-secondary);
							margin-right: 4px;
							min-width: 70px;
						}

						.value {
							color: var(--el-text-color-primary);

							&.time {
								color: var(--el-text-color-secondary);
								font-size: 13px;
							}
						}

						.ml-4 {
							margin-left: 16px;
						}
					}
				}
			}
		}
	}
}
</style>
